<template>

  <div>

    <MmvTitle title="库存"></MmvTitle>

    <el-table v-loading="loading" :data="list" max-height="200px"
              row-key="id"
              :span-method="objectSpanMethod"
              border>
      <el-table-column
        label="车牌号"
        align="center"
        prop="carNo"
        min-width="150"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <el-row>{{scope.row.carNo}}</el-row>
          <el-row v-if="scope.row.startTime||scope.row.endTime">调入 {{scope.row.startTime}}~{{scope.row.endTime}}</el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="停靠门店"
        align="center"
        prop="locatedStoreName"
        min-width="150"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getStorageList"
    />

    <MmvTitle title="订单"></MmvTitle>

    <el-table v-loading="loading1" :data="list1" max-height="200px"
              :span-method="objectSpanMethod"
              row-key="orderNo"
              border>


      <el-table-column
        label="租赁时间"
        align="center"
        min-width="200"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{scope.row.actualStartTime}}~{{scope.row.actualEndTime}}
        </template>
      </el-table-column>
      <el-table-column
        label="订单状态"
        align="center"
        prop="orderStatus"
        min-width="150"
        show-overflow-tooltip
      >
        <template v-slot="scope">
        <dict-tag style="display: inline-block" :options="dict.type.sys_order_status" :value="scope.row.orderStatus" />
        </template>
      </el-table-column>
      <el-table-column
        label="取车门店"
        align="center"
        prop="takeStoreName"
        min-width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="车牌号"
        align="center"
        prop="carNo"
        min-width="150"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>

    <pagination
      :total="total1"
      :page.sync="pageNum1"
      :limit.sync="pageSize1"
      @pagination="getOrderList"
    />

  </div>

</template>

<script>
import {chedulingcarlist, chedulingorderlist} from '@/api/car/car_basic'
import MmvTitle from "@/components/MmvUI/MmvTitle.vue";

export default {
  components: {
    MmvTitle,
  },
  dicts: ['sys_order_status'],
  data() {
    return {
      loading: true,
      loading1: true,
      list: [],
      list1: [],
      total: 0,
      total1: 0,
      pageNum: 1,
      pageSize: 10,
      pageNum1: 1,
      pageSize1: 10,
    };
  },
  props: {
    queryParams: {
      type: Object,
      default(){
        return{}
      }
    }
  },
  mounted() {
    this.getStorageList();
    this.getOrderList();
  },
  methods: {
    getStorageList() {
      this.loading = true;
      chedulingcarlist(
        {
          ...this.queryParams,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      ).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;

        this.setrowspans()
      }).catch(e => {
        this.loading1 = false;
      });
    },

    getOrderList() {
      this.loading1 = true;
      chedulingorderlist(
        {
          ...this.queryParams,
          pageNum: this.pageNum1,
          pageSize: this.pageSize1,
        }
      ).then((response) => {
        this.list1 = response.rows;
        this.total1 = response.total;
        this.loading1 = false;

        this.setrowspans1()
      }).catch(e => {
        this.loading1 = false;
      });
    },

    //获得数据相同的行数
    objectSpanMethod({row, column, rowIndex, columnIndex}) {

      if(1===this.queryParams.dataType){
        if (columnIndex === 0 || columnIndex === 1) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          };
        }
      }

    },

    setrowspans() {
      if(1===this.queryParams.dataType) {
        // 先给所有的数据都加一个v.rowspan = 1
        this.list.forEach(v => {
          v.rowspan = 1;
        });
        // 双层循环
        for (let i = 0; i < this.list.length; i++) {
          // 内层循环，上面已经给所有的行都加了v.rowspan = 1
          // 这里进行判断
          // 如果当前行的id和下一行的id相等
          // 就把当前v.rowspan + 1
          // 下一行的v.rowspan - 1
          for (let j = i + 1; j < this.list.length; j++) {
            //此处可根据相同字段进行合并，此处是根据的id
            if (this.list[i].carModelId === this.list[j].carModelId) {
              this.list[i].rowspan++;
              this.list[j].rowspan--;
            }
          }
          // 这里跳过已经重复的数据
          i = i + this.list[i].rowspan - 1;
        }
      }
    },

    setrowspans1() {
      if(1===this.queryParams.dataType) {
        // 先给所有的数据都加一个v.rowspan = 1
        this.list1.forEach(v => {
          v.rowspan = 1;
        });
        // 双层循环
        for (let i = 0; i < this.list1.length; i++) {
          // 内层循环，上面已经给所有的行都加了v.rowspan = 1
          // 这里进行判断
          // 如果当前行的id和下一行的id相等
          // 就把当前v.rowspan + 1
          // 下一行的v.rowspan - 1
          for (let j = i + 1; j < this.list1.length; j++) {
            //此处可根据相同字段进行合并，此处是根据的id
            if (this.list1[i].schedulingModelId === this.list1[j].schedulingModelId) {
              this.list1[i].rowspan++;
              this.list1[j].rowspan--;
            }
          }
          // 这里跳过已经重复的数据
          i = i + this.list1[i].rowspan - 1;
        }
      }
    },

  },
};
</script>

<style scoped>
.bottom-layout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 40px 0 0;
}

</style>
